<template>
	<jk-dialog
		v-model="showDialog"
		title="详情"
		width="800px"
		:append-to-body="false"
		:show-close-btn="true"
		:show-confirm-btn="false"
		:show-cancel-btn="false"
		@on-close="onVisibleChange(false)"
		@on-cancel="onVisibleChange(false)"
		@on-visible-change="onVisibleChange"
	>
		<jk-divider-card title="基本信息" placement="center" class="margin-top-20">
			<el-descriptions>
				<el-descriptions-item span="2" label="名称">{{ dataItem.signalName }}</el-descriptions-item>
				<el-descriptions-item label="数值">{{ dataItem.value }}</el-descriptions-item>
				<el-descriptions-item span="2" label="状态">{{ dataItem.statusName }}</el-descriptions-item>
				<el-descriptions-item label="数据类型">{{ dataItem.fieldType }}</el-descriptions-item>
			</el-descriptions>
		</jk-divider-card>
		<div class="flex-end-center-wrap">
			<!--			<el-date-picker-->
			<!--				v-model="searchParams.blangDataTime"-->
			<!--				class="search-bar-item-size2 item-gap margin-t-b"-->
			<!--				type="datetimerange"-->
			<!--				range-separator="~"-->
			<!--				size="small"-->
			<!--				start-placeholder="开始日期"-->
			<!--				end-placeholder="结束日期"-->
			<!--			></el-date-picker>-->
			<el-date-picker
				v-model="belangDate"
				size="small"
				style="width: 140px"
				type="date"
				placeholder="选择日期"
				:clearable="false"
				@change="onChangeTimePickerDate"
			>
			</el-date-picker>
			<el-time-picker
				v-model="belangTimeLeft"
				style="width: 140px"
				placeholder="开始时间点"
				size="small"
				:clearable="false"
				@change="onChangeTimePickerLift"
			>
			</el-time-picker>
			<el-time-picker
				v-model="belangTimeRight"
				style="width: 140px ;margin-right: 5px"
				:picker-options="{
					selectableRange: selectableRange
				}"
				placeholder="结束时间点"
				size="small"
				:clearable="false"
				:disabled="!belangDate || !belangTimeLeft"
				@change="onChangeTimePickerRight"
			>
			</el-time-picker>

			<jk-input v-model="searchParams.value" placeholder="采集值" size="small" class="search-bar-item-size1 margin-5-0 item-gap"></jk-input>
			<jk-search-button @click="onSearchBtn"></jk-search-button>
		</div>
		<jk-table
			ref="jkTable"
			:loading="tableLoading"
			class="width-100-percent"
			:data="tableData"
			border
			highlight-hover-row
			highlight-current-row
			:height="dialogTableHeight - 200"
		>
			<vxe-table-column type="seq" title="序号" align="center" :width="50"></vxe-table-column>
			<vxe-table-column field="collectTime" title="采集时间" align="left" :width="150"></vxe-table-column>
			<vxe-table-column field="value" title="采集值" align="left" :width="150"></vxe-table-column>
		</jk-table>
	</jk-dialog>
</template>

<script>
  // import orderListPopoverBar from './components/order-list-popover-bar';
    import { formatDate, pageConfig, formatTime } from '/src/utils/jk/jk-tool';
    import { orderPriorityList, saleOrderStateList } from '../../../utils/jk/status-option-list';
    import calTableHeight from '../../../mixins/cal-dialog-height';
    import { tipsBar } from '../../../utils/jk/jk-tool';
    import { ProductionIotMachineCollectionDataInfo } from '@/api/equipmentMonitoring';
    export default {
        mixins: [calTableHeight],
        components: {
            // orderListPopoverBar
        },
        props: {
            dialogState: {
                type: Boolean,
                default: false
            },
            dataList: {
                type: Array,
                default() {
                    return [];
                }
            },
            dataItem: {
                type: Object,
                default() {
                    return {};
                }
            }
        },
        data() {
            return {
                priorityList: orderPriorityList,
                saleOrderStateList: saleOrderStateList,
                showDialog: false,
                tableLoading: true,
                saveBtnLoading: false,
                value1: '',
                value2: '',
                belangDate: '',
                belangTimeLeft: '',
                belangTimeRight: '',
                selectableRange: '',
                dateTimeLift: '',
                dateTimeRight: '',
                tableDataFilter: [],
                searchParams: {
                    endDataTime: '',
                    startDataTime: '',
                    uid: '',
                    signalId: '',
                    blangDataTime: []
                },
                ruleForm: {},
                rules: {},
                tableData: [],
                selectData: {}
            };
        },
        methods: {
            onRadioChange(selection) {
                this.selectData = selection.row;
            },
            onChangeTimePickerDate(val) {
                this.belangDate = formatTime(val).split(' ')[0];
            },
            onChangeTimePickerLift(val) {
                if (this.belangTimeRight || this.dateTimeRight) {
                    this.belangTimeRight = '';
                    this.dateTimeRight = '';
                }
                const originalDate = new Date(val);
                // 添加三个小时
                originalDate.setHours(originalDate.getHours() + 3);
                // 输出计算后的时间
                this.selectableRange = `${val} - ${originalDate}`;
                this.dateTimeLift = formatTime(originalDate.setHours(originalDate.getHours() - 3)).split(' ')[1];
            },
            onChangeTimePickerRight(val) {
                if (val !== null) {
                    const originalDate = new Date(val);
                    this.dateTimeRight = formatTime(originalDate.setHours(originalDate.getHours())).split(' ')[1];
                }
            },
            onConfirmBtn() {
                this.$refs['ruleForm'].validate(valid => {
                    if (valid) {
                    } else {
                        this.$tipsBar(this, 'validator');
                    }
                });
            },
            onVisibleChange(e) {
                this.$emit('on-visible-change', e);
                if (!e) {
                    Object.assign(this.$data, this.$options.data());
                    this.$nextTick(() => {
                        // this.$refs.ruleForm.resetFields();
                    });
                }
            },
            /** 搜索按钮操作 */
            onSearchBtn() {
                this.searchParams.pageNo = 1;
                this.searchParams.count = 1;
                if (!this.searchParams.value) {
                    if (!this.belangDate && !this.dateTimeRight && !this.dateTimeLift) {
                        this.getListRequest();
                    } else if (this.belangDate && this.dateTimeRight && this.dateTimeLift) {
                        this.getListRequest();
                    } else {
                        this.$message({
                            message: '请填写完整查询日期',
                            type: 'warning'
                        });
                    }
                } else {
                    this.tableDataFilter.forEach((x) => {
                        if (x.value === this.searchParams.value) {
                            this.tableData = [];
                            this.tableData.push(x);
                        }
                    });
                }
            },
            getListRequest() {
                this.tableLoading = true;
                const params = {
                    signalId: this.dataItem.signalId,
                    uid: this.dataItem.uid,
                    startDataTime: `${this.belangDate ? this.belangDate : ''} ${this.dateTimeLift ? this.dateTimeLift : ''}`,
                    endDataTime: `${this.belangDate ? this.belangDate : ''} ${this.dateTimeRight ? this.dateTimeRight : ''}`
                };
                if (params.startDataTime.length < 5 || params.endDataTime.length < 5) {
                    delete params.startDataTime;
                    delete params.endDataTime;
                }
                return ProductionIotMachineCollectionDataInfo(params).then(res => {
                    this.tableLoading = false;
                    if (res.data.status === 200) {
                        this.tableData = res.data.res || [];
                        this.tableDataFilter = res.data.res || [];
                    }
                });
            },
            async getDependentData() {
                this.tableLoading = true;
                await this.getListRequest();
                this.tableLoading = false;
            }
        },
        watch: {
            dialogState(newVal) {
                this.showDialog = newVal;
                if (newVal) {
                    this.ruleForm = this.dataList && this.dataList.length ? JSON.parse(JSON.stringify(this.dataList[0])) : {};
                    this.getDependentData();
                }
            }
        }
    };
</script>
<style scoped lang="scss">
// 解决在生产订单编辑页打开时全局的margin-bottom-10被覆盖的问题
.margin-bottom-10 {
  margin-bottom: 10px;
}

.el-descriptions {
  padding: 10px 90px;
}

.margin-t-b {
  margin: 10px 0px 10px 0px;
}
</style>
